<template>
    <view class="lucky_plaza">
        <view class="title">--运气广场--</view>
        <view class="content">
            <view class="product">
                <image src="../../../../static/test/1.png"></image>
                <text class="name otw">水星甲方</text>
                <text class="detail c_868686 otw">描述文本</text>
                <button class="lucky_btn">免费抽奖</button>
            </view>
        </view>
    </view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.lucky_plaza {
    margin-top: 20rpx;
    .title {
        text-align: center;
        color: #3C95F5;
        font-weight: bold;
    }
    .content {
        display: flex;
        flex-wrap: wrap;
        .product {
            position: relative;
            text-align: center;
            background-color: #fff;
            height: 500rpx;
            width: 49%;
            border-radius: 30rpx;
            overflow: hidden;
            margin-top: 20rpx;
            &:nth-child(2n) {
                margin-left: 2%;
            }
            image {
                top: 0;
                left: 0;
                position: absolute;
                height: 300rpx;
                width: 100%;
            }
            text {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: 90%;
                font-size: 30rpx;
            }
            .name {
                bottom: 135rpx;
            }
            .detail {
                bottom: 90rpx;
            }
            .lucky_btn {
                position: absolute;
                bottom: 10rpx;
                padding: 0;
                line-height: 70rpx;
                width: 230rpx;
                border-radius: 70rpx;
                border: unset;
                background: linear-gradient(180deg, #2394FF 0%, #68C1FF 100%);
                left: 50%;
                transform: translateX(-50%);
                color: #fff;
            }
        }
    }
}
</style>